<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
>
 
    <h:head>
        <title>Carrito</title>
    </h:head>
    <h:body>
     	<h1> <p align="center"> Carrito De Compras </p> </h1>
     	
		<p:growl id="growl" showDetail="true" sticky="true" />
		
		<h:form id="form">
			<p:dataTable value="#{mBTienda.arrProdCarrito}" var="producto" border="1">
			
	    		<p:column>
	        		<f:facet name="header">
	           			<h:outputText value="Nombre" />
	        		</f:facet>
	        		<h:outputText value="#{producto.nombre}" />
	    		</p:column>
	    		<p:column>
	        		<f:facet name="header">
	           			<h:outputText value="Precio" />
	        		</f:facet>
	        		<h:outputText value="#{producto.precio}" />
	    		</p:column>
	    		
	    		<p:column>
	        		<f:facet name="header">
	           			<h:outputText value="Cantidad" />
	        		</f:facet>
	        		<h:outputText value="#{producto.cant}" />
	    		</p:column>
	    		
	    		<p:column>
	        		<f:facet name="header">
	           			<h:outputText value="+" />
	        		</f:facet>
	        		<p:commandButton icon="ui-icon-circle-plus" action="#{mBTienda.sumarCant(producto.id)}" ajax="false"/>
	    		</p:column>
	    		
	    		<p:column>
	        		<f:facet name="header">
	           			<h:outputText value="-" />
	        		</f:facet>
	        		<p:commandButton icon="ui-icon-circle-minus" action="#{mBTienda.restarCant(producto.id)}" update=":form"/>
	    		</p:column>
	    		
	    		<p:column>
	        		<f:facet name="header">
	           			<h:outputText value="X" />
	        		</f:facet>
	        		<p:commandButton icon="ui-icon-trash" action="#{mBTienda.borrarDelCarrito(producto.id)}" update=":form"/>
	    		</p:column>
	    		
	        </p:dataTable>
	     
		    <p:panel header="Total" > 
				<h:outputText id="carrito" value="$: #{mBTienda.totalCarrito()}"/>
				<h:form id="form">
					<h:commandButton value="Realizar Compra" action="#{mBTienda.realizarCompra()}"/>
				</h:form>
			</p:panel>
        </h:form>
    </h:body>
</html>